<!--  -->
<template>
  <div class="rule-item-css">
    <div v-text="ruleItem.textBefore"></div>
    <el-select v-model="params[ruleItem.fieldsBoard]"
               :placeholder="ruleItem.hint"
               @change="changeBoardSelected"
               size="mini"
               clearable
               filterable
               default-first-option
               :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
               class="select-box">
      <el-option v-for="(o,io) in boardList"
                 :key="io"
                 :value="o.name"
                 :label="o.id"></el-option>
    </el-select>
    <div v-html="ruleItem.textCenter"></div>
    <el-select v-model="params[ruleItem.fieldsStatus]"
               :placeholder="ruleItem.hint"
               size="mini"
               clearable
               filterable
               default-first-option
               :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
               class="select-box">
      <el-option v-for="(j,ij) in statusList"
                 :key="ij"
                 :value="j.name"
                 :label="j.id"></el-option>
    </el-select>
    <div v-html="ruleItem.textAfter"></div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/next-ticket-rule-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      dataList: []
    }
  },
  computed: {
    typeList () {
      return this.dataList.filter(e => e.id === this.params['board'])
    },
    subTypeList () {
      return this.typeList.filter(e => e.id === this.params['type'])
    },
    itemsList () {
      return this.typeList.filter(e => e.id === this.params['subType'])
    }
  },
  methods: {
    init () {
      this.getDataList()
    },
    getDataList () { }
  }
}
</script>

<style scoped lang='scss'>
.rule-item-css {
  display: flex;
  justify-content: flex-start;
  .select-box {
    margin: 0 10px;
  }
}
</style>
